import * as React from 'react';
import { get } from 'lodash';
import { Form, Input, Button, Icon } from 'antd';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableDragger = LoadableComponent(() => import('components/common/Dragger'));
const LoadableMedia = LoadableComponent(() => import('components/common/Media'));

const FormItem = Form.Item;

interface EditFormProps {
  onSubmit: (data: Record<string, any>) => any;
  editTag: any;
  form: any;
  loading: boolean;
}
interface EditFormState {
  audio: any;
  image: any;
}

/**
 * Tag新增或修改
 */
class EditForm extends React.Component<EditFormProps, EditFormState> {
  constructor(props: EditFormProps) {
    super(props);

    this.state = {
      audio: get(props.editTag, 'audio', null),
      image: get(props.editTag, 'cover', null),
    };
  }

  handleSubmit = (e: any) => {
    e.preventDefault();
    this.props.form.validateFields((err: any, values: any) => {
      if (err) return;

      this.props.onSubmit(values);
    });
  };

  // audio|cover
  renderAttach(type: any, attachment: any) {
    const { form } = this.props;
    if (attachment) {
      return (
        <div style={{ position: 'relative' }}>
          <LoadableMedia
            imageStyle={{ width: 300 }}
            attachment={attachment}
            onDestroy={() => {
              this.setState(
                {
                  [type]: null,
                },
                () => {
                  form.setFieldsValue({
                    [`${type}Id`]: null,
                  });
                }
              );
            }}
          />
        </div>
      );
    }

    return (
      <LoadableDragger
        key={type}
        accept={type}
        selectMax={1}
        onDone={(response: any) => {
          const newAttach = response.files[0];
          this.setState(
            {
              [type]: newAttach,
            },
            () => {
              form.setFieldsValue({
                [`${type}Id`]: newAttach.id,
              });
            }
          );
        }}>
        <Button type="primary">
          <Icon type="notification" />
        </Button>
      </LoadableDragger>
    );
  }

  render() {
    const { editTag, loading, form } = this.props;
    const { getFieldDecorator } = form;
    const { audio, image } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 10,
        },
      },
    };

    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="英文名称">
          {getFieldDecorator('enName', {
            rules: [
              {
                required: true,
                message: '英文名称是必填项',
              },
            ],
            initialValue: get(editTag, 'enName', null),
          })(<Input placeholder="标签英文名称" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="中文名称">
          {getFieldDecorator('cnName', {
            rules: [
              {
                required: true,
                message: '中文名称是必填项',
              },
            ],
            initialValue: get(editTag, 'cnName', null),
          })(<Input placeholder="标签中文名称" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="描述">
          {getFieldDecorator('description', {
            rules: [
              {
                required: true,
                message: '标签描述是必填项',
              },
            ],
            initialValue: get(editTag, 'description', null),
          })(<Input placeholder="标签描述" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="封面" style={{ verticalAlign: 'middle' }}>
          {getFieldDecorator('imageId', {
            rules: [
              {
                required: true,
                message: '封面是必填项',
              },
            ],
            initialValue: get(image, 'id', null),
          })(this.renderAttach('image', image))}
        </FormItem>
        <FormItem {...formItemLayout} label="音频" style={{ verticalAlign: 'middle' }}>
          {getFieldDecorator('audioId', {
            rules: [
              {
                required: true,
                message: '音频是必填项',
              },
            ],
            initialValue: get(audio, 'id', null),
          })(this.renderAttach('audio', audio))}
        </FormItem>

        <FormItem {...tailFormItemLayout}>
          <Button icon="save" type="primary" htmlType="submit" size="large" loading={loading}>
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(EditForm);
